<template>
  <div class="box" v-loading='isLoading'>
    <div v-show="flag==1" >
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">&emsp;</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark box_content">
            <div class="box_content_word">是否确认将预组装项目确定为正式项目进行规划设计和实施？</div>
            <div class="btn">
              <el-button class="btn_" type="primary" size="small" @click="btn_sure">是</el-button>
              <el-button class="btn_" size="small" @click="toSeeTable">重新调整</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">&emsp;</div>
        </el-col>
      </el-row>
    </div>

    <div class="basicInfo" v-show="flag==2">
      
      <div class="basicInfo_content">
        <div class="margin_bottom">
          <el-button icon="el-icon-back" size="small" @click="btnBack">返回</el-button>
        </div>
        <el-row class="el_row">
          <el-col :span="12">
            <div class="basic basicInput">
              <div class="basicInput_title">项目编号</div>
              <div class="basicInput_input">
                {{projectLandsInfo.number}}
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="basicInput">
              <div class="basicInput_title basicInput_title1">项目名称</div>
              <div class="basicInput_input">
                {{projectLandsInfo.name}}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="el_row">
          <el-col :span="12">
            <div class="basic basicInput">
              <div class="basicInput_title">所属区县</div>
              <div class="basicInput_input">
                {{projectLandsInfo.districts[0]}}
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="basicInput">
              <div class="basicInput_title basicInput_title1">项目级别</div>
              <div class="basicInput_input">
                {{projectLandsInfo.levelDto!=null?projectLandsInfo.levelDto.name:''}}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="el_row">
          <el-col :span="12">
            <div class="basic basicInput">
              <div class="basicInput_title">主要乡镇</div>
              <div class="basicInput_input">
                <span v-for="(item,index) in projectLandsInfo.mainTowns" :key='index'>
                  {{item}}&emsp;
                </span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="basicInput">
              <div class="basicInput_title basicInput_title1">行政村</div>
              <div class="basicInput_input">
                <span v-for="(item,index) in projectLandsInfo.villages" :key='index'>
                  {{item}}&emsp;
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="el_row">
          <el-col :span="12">
            <div class="basic basicInput">
              <div class="basicInput_title">指标使用方向</div>
              <div class="basicInput_input">
                {{projectLandsInfo.projectIndex!=null?projectLandsInfo.projectIndex.name:''}}
              </div>
            </div>
          </el-col>
          <!-- <el-col :span="12">
            <div class="basicInput">
              <div class="basicInput_title basicInput_title1">是否涉及户改</div>
              <div class="basicInput_input">
                {{projectLandsInfo.isReformDto!=null?projectLandsInfo.isReformDto.name:''}}
              </div>
            </div>
          </el-col> -->
          <el-col :span="12">
            <div class="basic basicInput">
              <div class="basicInput_title">项目类型</div>
              <div class="basicInput_input">
                {{projectLandsInfo.projectType!=null?projectLandsInfo.projectType.name:''}}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="el_row">
          
          <el-col :span="12">
            <div class="basicInput">
              <div class="basicInput_title basicInput_title1">是否涉及土地利用现状变更</div>
              <div class="basicInput_input">
                {{projectLandsInfo.isChangeDto!=null?projectLandsInfo.isChangeDto.name:''}}
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="basic basicInput">
              <div class="basicInput_title">土地使用权面积</div>
              <div class="basicInput_input inputUnit">
                {{projectLandsInfo.landArea}}
                <span class="inputEndText">单位：公顷</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="el_row">
          
          <!-- <el-col :span="12">
            <div class="basicInput">
              <div class="basicInput_title basicInput_title1">是否为高山生态扶贫搬迁项目</div>
              <div class="basicInput_input">
                {{projectLandsInfo.isPovertyDto!=null?projectLandsInfo.isPovertyDto.name:''}}
              </div>
            </div>
          </el-col> -->
        </el-row>
        
                
      </div>
      <div class="table">
       
        <div class="table_biao">
          <el-table :data="projectLandsList" border style="width: 100%">
            <el-table-column prop="landName" label="片块名"></el-table-column>
            <el-table-column prop="applicantName" label="权利人"></el-table-column>
            <el-table-column prop="villageName" label="乡镇名称"></el-table-column>
            <el-table-column prop="townName" label="行政村名称"></el-table-column>
            <el-table-column prop="address" label="通讯地址"></el-table-column>
            <el-table-column prop="landArea" label="使用权面积（㎡）"></el-table-column>
            <el-table-column label="操作" v-if="!isLook">
              <template slot-scope="scope">
                <el-button size="mini" @click="getLandId(scope.row.landId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { confirm_project_formal_assembly,get_project_complete_info,delete_project_land } from '@/api/earlySelect'
import { setTimeout } from 'timers';
export default {
  
  data() {
    return {
      flag: 1,
      value:'',
      input:'',
      projectLandsInfo:'',
      projectLandsList:[],
      nowType:1,
      isLoading:false,
      isLook:false,
    };
  },
  created(){
    if(localStorage.getItem("router") == "PROJECT_CONFIRM_PACKAGE"){
      this.flag = 1
    }else{
      this.flag = 2
    }

    if(localStorage.getItem("lookStatus") == 2){
      this.flag = 2
      this.isLook = true
    }
     this.getData()
  },
  
  methods: {
    getLandId(id){
      let that=this
        that.$confirm('是否删除？','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          let obj={
            projectId:localStorage.getItem('projectId') * 1,
            landIds:id
          }
          delete_project_land(obj).then(res=>{
            if(res.code==1000){
              that.$message({
                message: '删除成功',
                type: 'success'
              });
              that.getData()
            }else{
              that.$message({
                message: res.msg,
                type: 'error'
              });
            }
          })
        }).catch(() => {
              
        });
    },
    btnBack(){
      this.flag=1
      // this.$message({
      //   message:'请确认确认将预组装项目确定为正式项目进行规划设计和实施',
      //   type:'warning'
      // })
    },
    getData(){//点击重新调整（获取信息）
      let obj={
        projectId:localStorage.getItem('projectId') * 1
      }
      get_project_complete_info(obj).then(res=>{
        console.log(res,'res123')
        this.projectLandsInfo=res.data
        
        console.log(this.projectLandsInfo)
        this.projectLandsList=res.data.projectLands
      })
    },
    btn_sure(){//项目组装确认
      let that=this
        let obj={
          projectId:localStorage.getItem('projectId') * 1
        }
        that.$confirm('是否确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'none'
        }).then(() => {
          this.isLoading=true
          confirm_project_formal_assembly(obj).then(res=>{
            if(res.code==1000){
              this.isLoading=false
              // that.$message({
              //   message: '成功',
              //   type: 'success'
              // });
              that.$confirm('当前流程办理完成', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
              }).then(() => {
                this.$router.push({
                  path:'/xmkgh/ywdeal',
                })

              }).catch(() => {
                      
              });
            }else{
               this.isLoading=false
              that.$message({
                message: res.msg,
                type: 'error'
              });
            }
          })
        }).catch(() => {
              this.isLoading=false
        });
      
    },
    toSeeTable() {
      
        this.flag = 2;
    }
  }
};
</script>

<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.box {
  padding: 20px;
  background: #fff;
  .box_content {
    border: 1px solid #a1a1a1;
    box-sizing: border-box;
    margin: 20px auto;
    height: 200px;
    text-align: center;
    .box_content_word {
      color: #444;
      font-size: 16px;
      margin: 50px 20px 40px 20px;
    }
    .btn {
      .btn_ {
        width: 100px;
      }
    }
  }
}
.margin_bottom{
  margin-bottom: 20px;
}
.table {
  padding: 0px 30px;
  .table_biao{
    margin: 20px 0px;
  }
  .page_class{
    text-align: center;
  }
  .btn_tijiao{
    margin: 20px 0px;
    text-align: center;
  }
}
/deep/ .el_row_two {
  display: flex;
  align-items: center;
  padding-left: 40px;
}
.margin_top {
  margin-top: 55px;
}
.basicInfo_content {
  padding: 30px 40px;

  .select_bxo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    // div {
    //   font-size: 14px;
    //   color: #444;
    // }
    // .input {
    //   width: 200px;
    //   margin: 0px 20px 0px 10px;
    // }
  }
  /deep/ .el_row {
    margin-bottom: 30px;
    .basicInput {
      font-size: 13px;
      // color: #606266;
      display: flex;
      align-items: center;
      .basicInput_title {
        color: #999999;
        width: 180px;
      }
      .basicInput_input {
        // width: 220px;
        display: flex;
        align-items: center;
      }
      // .basicInput_title1 {
      //   width: 210px;
      // }
    }
  }
}
</style>
